<template>
    <div>
        <a-modal
            title="抽选指定人员"
            :visible="visible"
            @ok="handleOk"
            @cancel="visible = false"
            cancelText="关闭"
            :width="1000"
            :dialog-style="{ top: '20px' }"
            class="candidate-modal-table-v"
        >
            <!-- <template slot="title">
                <div style="display: flex;justify-content: flex-end;">
                    <a-button type="primary">确定</a-button>
                </div>
            </template> -->
            
            <commpVxeTable
                :key="manualKey"
                :isCanWrap="true"
                :config="manualmanualdataTableConfig" 
                :columns="manualcolumnsVxe" 
                :formItem="manualformItem"
                @radioChange="radioChange"
                :assembleWidth="906"
                @resetEvent="resetEvent"
                :prohibitSelection="{
                    key:'fgzzt',
                    value:'执行任务中',
                    type:'!='
                }"
                ref="acceptanceRegistrationRef"
            >
                <template v-slot:fgzdw_default="{row}" >
                    <span v-if="row.fsfyjsry == '是'" style="padding: 0 5px;background-color: #ff9200;color: #fff;border-radius: 5px;">药检</span>
                    {{ row.fgzdw }}
                </template>
                <template v-slot:realname_default="{row}">
                    <div >
                        <img v-if="row.fgzzt == '执行任务中'" style="position: absolute;top: 0px;left: -2px;height: 40px;width: 40px;" src="../../../../../../assets/ybx-ryselect.png" alt="">
                        <span v-if="row.fgpk == '是'" style="padding: 0 5px;background-color: #1ab394;color: #fff;border-radius: 5px;">高频</span>
                        <span style="padding-right: 21;" v-if="row.realname && row.realname.length == 2">
                            <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                                {{trem}}
                                <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
                            </span>
                        </span>
                        <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
                    </div>
                    
                </template>
                <template v-slot:flx_name="{data}" >
                    <a-tree-select
                        :style="{width: data.widthStringT}"
                        v-modal:value="flxVlaue"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        placeholder="请选择专家分类"
                        allow-clear
                        multiple
                        tree-default-expand-all
                        @change="onChange"
                    >
                        <a-tree-select-node v-for="(item,index) in flxList" :key="index+'-'+item.type1" :value="item.type1" :title="item.type1">
                            <a-tree-select-node v-for="(trem,tIndex) in item.type2List" :key="item.type1+'&'+trem" :value="item.type1+'&'+trem" :title="item.type1+'-'+trem">
                            </a-tree-select-node>
                        </a-tree-select-node>
                    </a-tree-select>
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" style="text-align: left;">
                        <a-form-item v-if="row.fgpk == '是'">
                            <a-button class="orange-btn dMould-btn" type="primary" @click="highFrequencyClick(row)" >取消高频</a-button>
                        </a-form-item>
                        <a-form-item v-else >
                            <a-button class="blue-btn dMould-btn" type="primary" @click="highFrequencyClick(row)" >设置高频</a-button>
                        </a-form-item>
                        
                    </a-form>
                </template>
            </commpVxeTable>
            <a-modal v-model="qrsfVisible" title="确认抽选人员身份" @ok="qrsfHandleOk" :forceRender="true">
                <div style="display: flex;justify-content: center;">
                    <a-radio-group v-model:value="zdzysf" name="radioGroup" :key="zdzysfKey">
                        <a-radio value="组长">组长</a-radio>
                        <a-radio value="组员">组员</a-radio>
                    </a-radio-group>
                </div>
            </a-modal>
        </a-modal>
    </div>
</template>
<script>
import {
    commonxpHcyByHand,
    jcyglupdateJcyGpk,
    dictzjflDict,
} from '../service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import assessCheckApi from '../service/api'
export default {
    components:{
        commpVxeTable,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            qrsfVisible:false,
            manualKey:null,
            manualformItem:[{
                label: '真实姓名',
                model: 'realname',
            },{
                label: '工作单位',
                model: 'fgzdw',
            },{
                label: '所属库',
                model: 'fssk',
                placeholder: '所属库',
                type:'Select',
                dictionaryType:'核查员所属库'
            },{
                label: '所属区域',
                model: 'fssqy',
            },{
                label: '是否高频',
                model: 'fgpk',
                type:'Select',
                options:[{
                    label:'是',
                    value:'是'
                },{
                    label:'否',
                    value:'否'
                }]
            },{
                label: '专家分类',
                model: 'flx',
                slotName:'flx_name'
                
            }],
            manualcolumnsVxe:[
            { 
                type: 'radio', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '真实姓名', //列头显示文字
                field: 'realname',
                fixed: 'left',
                slots: {
                    default:'realname_default',
                },
                width:123,
                // fgzzt 字段 = '执行任务中'
            },{
                title: '工作单位', //列头显示文字
                field: 'fgzdw',
                align:'left',
                slots: {
                    default:'fgzdw_default',
                },
            },{
                title: '所属库', //列头显示文字
                field: 'fssk',
                width:76,
            },{
                title: '所属区域', //列头显示文字
                field: 'fssqy',
                width:76,
            },{
                title: '擅长领域',
                field: 'fszly',
                align:'left'
            },{
                title: '专家分类', //列头显示文字
                field: 'flx',
            },{
                title: '操作',
                field: 'id',
                slots: {
                    default:'operation_btn',
                },
                width:104,
            }], 
            manualmanualdataTableConfig:{
                api: assessCheckApi.queryHcyPageList,
                rowId: 'id',
                fywflcode:'001002',
                height:window.innerHeight - 370,
                paramet:{},
                isIdeaText:'',
                
            },
            selectArr:[],
            currentData:{},
            selectData:{},
            zdzysf:'组长',
            isEditFssk:false,
            zdzysfKey:null,
            flxVlaue:[],
            flxList:[],
            flxRes:[],
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(val){
            this.currentData = val
            this.manualmanualdataTableConfig.paramet={sqsxid:val.sqsxid}
            dictzjflDict().then(res=>{
            if(res.code == 200){
                console.log('我获取到了什么树形',res)
                this.flxList = res.result
            }else{

            }
        })
            this.manualKey = Date.now()
        },
        radioChange(val){
            //console.log(val)
            this.selectData = val.row
            if(this.selectData.fssk == '组长'){
                this.isEditFssk = true
            }else{
                this.isEditFssk = false
            }
        },
        qrsfHandleOk(){
            this.isEditFssk = false
            this.handleOk(1)
        },
        highFrequencyClick(row){
            //console.log(row)
            var that = this
            this.$confirm({
                title:'您确认要'+(row.fgpk == '是'?'取消':'设置')+'高频吗？',
                onOk() {
                    let data = {
                        id:row.id,
                        fgpk:row.fgpk,
                    }
                    jcyglupdateJcyGpk(data).then(res=>{
                        if(res.code == 200){
                            that.$message.success(res.message)
                            that.$refs.acceptanceRegistrationRef.searchEvent()
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
            
        },
        resetEvent(){
            this.flxVlaue = []
            this.flxRes = []
            this.manualdataTableConfig.paramet.flx=''
            
        },
        async onChange(value, node){
            console.log('selectvalue',value)
            let res= []
            let arr = value.filter(a=>a.indexOf('&') == -1)
            let zjArr = value.filter(a=>a.indexOf('&') !== -1)
            if(arr.length && zjArr.length){
                arr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }else if(arr.length){
                res = arr
            }else if(zjArr.length){
                let fjArr = []
                await zjArr.forEach((item,index)=>{
                    let i = item.split('&')
                    let dd = fjArr.filter(u=>u == i[0])
                    if(!dd.length){
                        fjArr.push(i[0])
                    }
                    
                })
                fjArr.forEach((item,index)=>{
                    res.push({fj:item,zj:zjArr.filter(k=>k.indexOf(item) !== -1)})
                })
            }
            console.log('最终结果',res)
            let resArr = res.map(i=>{return {fj:i.fj?i.fj:i,zj:i.zj && i.zj.length?i.zj.map(k=>{return k.split('&')[1]}):[]}})
            console.log('最终结果2',resArr)
            // res.map(a=>{ return a.fj+a.})
            this.flxRes = resArr.map(a=>{return a.zj.length?a.fj+'('+a.zj.join('、')+')':a.fj})
            this.manualmanualdataTableConfig.paramet = {
                ...this.manualmanualdataTableConfig.paramet,
                flx:this.flxRes.length?this.flxRes.join(','):'',
            }
            this.$refs.acceptanceRegistrationRef.searchEvent()
        },
        handleOk(val){
            if(this.selectData.id){
                if(this.selectData.fssk == '组长' && this.isEditFssk){
                    this.qrsfVisible = true
                    this.zdzysfKey = Date.now()
                }else{
                    let data = {
                        hcyids:this.selectData.id,
                        ...this.currentData,
                    }
                    if(val){
                        data.zdzysf = this.zdzysf
                    }
                    commonxpHcyByHand(data).then(res=>{
                        if(res.code == 200){
                            this.$message.success(res.message)
                            this.selectData = {}
                            this.manualKey = Date.now()
                            this.$emit('candidateSuccessChange',this.currentData)
                            this.qrsfVisible = false
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }
                
            }else{
                this.$message.warning('请选择人员')
            }
        }
    }
}
</script>
<style lang="less">
.candidate-modal-table-v{

}
</style>